<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>企业中心</title>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    <!-- <link rel="stylesheet" type="text/css" href="css/css.css "/> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>


    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>  <!--js文件中-->
    <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/dist/js/distpicker.data.js"></script>
    <script src="js/dist/js/distpicker.js"></script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/enterprise.css"/>
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">

</head>
<body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
        <!-- 导航栏logo -->
          <a class="navbar-brand navbar-left" href="#">
            内蒙古自治区退役军人双创平台
          </a>
        </div>

        <div class="nav navbar-nav navbar-right">
            <!-- 导航栏选项卡 -->
            <ul id="myTab" class="nav navbar-nav" role="tablist">
                <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">职位管理</a></li>
                <li><a href="#rule" role="tab" data-toggle="tab">简历管理</a></li>
                <li><a href="#forum" role="tab" data-toggle="tab">人才市场</a></li>
                <li><a href="#security" role="tab"  data-toggle="tab">消息中心</a></li>
              </ul>
            <!-- 导航栏公司简介 -->
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">蒙牛股份有限责任公司<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">消息中心</a></li>
                    <li><a href="#">设置</a></li>
                    <li><a href="#"></a></li>
                  </ul>
                </li>
               </ul>
            <!-- 退出导航栏 -->
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" class="nav navbar-nav">退出 <span class="glyphicon glyphicon-off"></span></a>
                </li>
            </ul>

          </div>
      </div>
    </nav>

    <!-- 选项卡面板 -->
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="bulletin">
            <!-- 发布职位开始 -->
            <div class="publishingPosts" >
                <!-- 导航栏开始 -->
                <div class="menu">
                    <div class="nav">
                        <span>新建职位</span>

                        <div class="navbar-right">
                            <button type="button" class="btn" data-toggle="button" aria-pressed="false" autocomplete="off">
                              返回
                            </button>
                            <button type="button" class="btn" data-toggle="button" aria-pressed="false" autocomplete="off">
                              重置
                            </button>
                            <button type="button" class="btn" data-toggle="button" aria-pressed="false" autocomplete="off">
                              保存为模板
                            </button>
                            <button type="button" class="btn" data-toggle="button" aria-pressed="false" autocomplete="off">
                              职位浏览
                            </button>
                            <button type="button" class="btn orange" data-toggle="button" aria-pressed="false" autocomplete="off">
                              立即发布
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 导航栏结束 -->
                <div class="content">

                    <form class="form-horizontal">
                      <div class="title">职位描述</div>
                      <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">职位模板</label>
                        <div class="col-sm-10">
                          <select class="form-control" placeholder="请选择职位模板">
                              <option>请选择职位模板</option>
                              <option>职位模板1</option>
                              <option>职位模板2</option>
                              <option>职位模板3</option>
                              <option>职位模板4</option>
                              <option>职位模板5</option>
                           </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span></span>职位名称</label>
                        <div class="col-sm-10">
                          <input type="password" class="form-control"   placeholder="请填写职位名称">
                        </div>
                      </div>
                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span>*</span>工作地址</label>
                        <div class="col-sm-10">
                        <!-- 城市选择开始 -->
                        <div data-toggle="distpicker">
                            <div class="form-group">
                              <div class="col-sm-2 pr0">
                                  <label class="sr-only" for="province1">Province</label>
                                  <select class="form-control" id="province1" name="city1"></select>
                              </div>
                              <div class="col-sm-2 pr0">
                                  <label class="sr-only" for="city1">City</label>
                                  <select class="form-control" id="city1" name="city2"></select>
                              </div>
                              <div class="col-sm-2 pr0">
                                  <label class="sr-only" for="district1">District</label>
                                  <select class="form-control" id="district1" name="city3"></select>
                              </div>
                              <div class="col-sm-6">
                                  <label class="sr-only" for="district1">District</label>
                                  <input type="text" class="form-control" placeholder="请输入详细地址">
                              </div>
                            </div>
                        </div>
                        <!-- 城市选择结束 -->
                        </div>
                      </div>
                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span>*</span>月薪范围</label>
                        <div class="col-sm-2 pr0">
                          <input type="text" class="form-control duan1" placeholder="最低">元-
                        </div>
                        <div class="col-sm-2 pl0">
                          <input type="text" class="form-control duan1" placeholder="最高">元
                        </div>

                      </div>
                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span>*</span>最低学历</label>
                        <div class="col-sm-4">
                          <select class="form-control" placeholder="请选择职位模板">
                              <option>请选择学历</option>
                              <option>大专</option>
                              <option>本科</option>
                              <option>研究生</option>
                              <option>博士</option>
                              <option>硕士</option>
                           </select>
                        </div>
                        <label   class="col-sm-2 control-label"><span>*</span>工作年限</label>
                        <div class="col-sm-4">
                          <select class="form-control" placeholder="请选择职位模板">
                              <option>请选择工作年限</option>
                              <option>应届</option>
                              <option>1年</option>
                              <option>3年</option>
                              <option>5年</option>
                              <option>8年</option>
                              <option>10年以上</option>}
                              option
                           </select>
                        </div>
                      </div>


                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span>*</span>所属行业</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control"   placeholder="请选择所属行业">
                        </div>
                      </div>

                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span>*</span>职位描述</label>
                        <div class="col-sm-10">
                          <textarea class="form-control" rows="3"></textarea>
                        </div>
                      </div>

                      <!-- 职位亮点开始 -->
                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span>*</span>职位亮点</label>
                        <div class="col-sm-10 ld">
                          <p>请选择职位亮点，最多可选择<span class="cOrange">8</span>项目</p>
                          <div class="yxfl"></div>
                          <div class="qyfl">
                            <div class="qyflCont">

                            </div>
                            <span class="retract">收起↑</span>
                          </div>
                        </div>
                      </div>
                      <!-- 职位亮点开始 -->


                      <div class="title">职位设置</div>

                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span></span>招聘人数</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control duan" placeholder="1">人
                        </div>
                        <label   class="col-sm-2 control-label"><span></span>简历转发到邮</label>
                        <div class="col-sm-4">
                          <input type="email" class="form-control" placeholder="请输入邮箱地址">
                        </div>
                      </div>



                      <div class="title">发布设置</div>

                      <div class="form-group">
                        <label   class="col-sm-2 control-label"><span></span>预约发布</label>
                        <div class="col-sm-4" id="data">
                          <input type="text" class="form-control" placeholder="请选择开始时间">
                        </div>


                        <label   class="col-sm-2 control-label"><span></span>下线时间</label>
                        <div class="col-sm-4" id="data2" data-date-format="dd-mm-yyyy">
                          <input type="text" class="form-control"  placeholder="请选择结束时间">
                        </div>

                      </div>
                    </form>


                </div>

            </div>
            <!-- 发布职位结束 -->


        </div>
        <div class="tab-pane " id="rule">简历管理</div>
        <div class="tab-pane " id="forum">人才市场</div>
        <div class="tab-pane " id="security">消息中心</div>
    </div>
</body>
</html>

<script>
$(function(){
    /*职位亮点*/
    let welfare = ["五险一金","年底双薪","绩效奖金","年终分红","股票期权","加班补助","交通补助","餐补","房补","全勤奖","包吃","包住","通讯补助","采暖补贴","带薪年假","弹性工作","补充医保"];
    let reWelfare = [];

    /*数据赋值*/
    for(var i=0;i<welfare.length;i++){
      $(".publishingPosts .ld .qyflCont").append("<span class='flList data-index-"+welfare[i]+"'>"+welfare[i]+"</span>")
    }


    /*已选数组*/
    function selected(arr,obj){
      $(obj).empty();
      for(var i=0;i<arr.length;i++){
       $(obj).append("<span class='yxList data-index-"+arr[i]+"'>"+arr[i]+"</span>")
      }
    }
    /*选择对应数据*/
    $(".publishingPosts .ld .qyflCont span").click(function(){
      if($(this).attr('class').indexOf('active') == -1){
        number()
        $(this).addClass('active');
        reWelfare.push($(this).html());
        selected(reWelfare,'.publishingPosts .ld .yxfl');
      }else{
        $(this).removeClass('active')
        refreshData($(this),reWelfare)
      }
    })
    /*判断数据选择数量*/
    function number(){
      if(reWelfare.length >= 8){
        alert("最多8项")
        stopImmediatePropagation();
      }
    }
    /*收起*/
    $(".retract").click(function() {
      System.Threading.Thread.CurrentUICulture = CultureInfo.GetCultureInfo("en-US");
      var wheight = $(".publishingPosts .ld .qyflCont").css("display")

      if(wheight == 'block'){
        $(".publishingPosts .ld .qyflCont").slideUp();
        $(this).html("展开↓")
      }else{
        $(".publishingPosts .ld .qyflCont").slideDown();
        $(this).html("收起↑")
      }
    });
    /*删除对应数据*/
    function refreshData(mythis,arr){
        arr.splice($.inArray(mythis.html(),reWelfare),1);
        selected(arr,'.publishingPosts .ld .yxfl');
    }
    // .qyflCont
    // .yxfl
    $(".yxfl").delegate(".yxList","click",function(){
        /*对应数据移除模块*/
        refreshData($(this),reWelfare);
        /*移除对应样式*/
        let myContent = $(this).html();
        console.log(1,myContent)
        $(".qyflCont").find("span").each(function(index, el) {
            if($(this).html() == myContent){
                $(this).removeClass('active')
            }
        });
    });
    /*时间选择器*/
    $("#data input,#data2 input").datetimepicker({
        language:'zh-CN', //语言
        minView: "month",  //最精确的时间选择视图。
        format: 'yyyy-mm-dd',  //日期格式
        todayHighlight:true, //高亮当前日期
        autoclose:true //当选择一个日期之后是否立即关闭此日期时间选择器。
    }).on('changeDate',function(ev){  //当日期被改变时被触发。
        console.log(ev.date.valueOf());
    });



})
</script>